<!--
 * @Author: 林希雨 1170893640@qq.com
 * @Date: 2023-01-02 16:39:27
 * @LastEditors: 林希雨 1170893640@qq.com
 * @LastEditTime: 2023-01-02 18:29:21
 * @FilePath: \code\html\week11\练习\点击按钮弹出练习.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>
<style>
    .box_body{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, .4);
    }
    .little{
        border-radius: 8px;
        background-color: #fff;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: 1px solid;
    }
    .tittle, .conter, .footer{
        margin: 20px 0;
    }
    botton{
        cursor:pointer;
    }
</style>
<body>
    <div id="app">
        <button @click="openBox=true">点击弹出窗口</button>
        <box :visiable="openBox" @slefopen="canOpen"></box>
    </div>
</body>
</html>
<template id="box">
    <div class="box_body" v-show="visiable" key="div">
        <div class="little">
            <div class="tittle">
                提示
            </div>
            <div class="conter">
                这是一个弹出框
            </div>
            <div class="footer">
                <button @click="canOpening">确定</button>
            </div>
        </div>
    </div>
</template>
<script>
    Vue.component('box',{
        template:"#box",
        props:{
            visiable:{
                type: Boolean,
                // required:false,
                default(){
                    return false
                }
            }
        },
        methods:{
            canOpening(){
                this.$emit("slefopen")
            }
        }
    });  


    let vm = new Vue({
        el : "#app",
        data:{
            openBox: false
        },
        methods:{
            canOpen(){
                this.openBox = false
            }
        }
    })
</script>